<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>element ui日期组件的修改</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="app">
      <el-content-date type="date" v-model="value" ref="contentDate">
        <span v-for="(msg,index) in currentMonthText" :key="msg.dayMessage + index">{{ msg.dayMessage }}</span>
        <template slot="footer">
          <el-row type="flex">
             预定房间数:
             <input v-model="num" size="mini" class="w-60 base-input el-input el-input__inner el-input--mini" />
             <i class="el-icon-circle-plus-outline base-icon" @click="addNum"></i>
          </el-row>
          <el-row type="flex">
            选择时间段内最大可预约房间数:1
          </el-row>
          <el-row type="flex">
            已选择2021年:....
          </el-row>
        </template>
      </el-content-date>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./el-content-date.js"></script>
<script src="./app.js"></script>

</html>